import React, { Component } from 'react';
import './App.css';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store/';
import * as actionTypes from './store/actionTypes';

class App extends Component {

    constructor(props){
        super(props);
        
        this.handleInputChange = this.handleInputChange.bind(this);
        this.storeChange = this.storeChange.bind(this);
        this.HandleSure = this.HandleSure.bind(this);
        
        this.state = store.getState();
        store.subscribe(this.storeChange);
    }
  
    render() {

        return (
        <div style={{marginLeft: '100px', marginTop: 50}}>

            <Input
                placeholder="请输入关键字" 
                value={this.state.inputValue}
                onChange={this.handleInputChange}
                style={{width: 300, marginRight: 10}} 
            />
            <Button type="primary" onClick={this.HandleSure}>确定</Button>

            <List
                size="small"
                bordered
                style={{width: 300}}
                dataSource={this.state.list}
                renderItem={(item,index) => (<List.Item onClick={this.handleDelete.bind(this,index)}>{item}</List.Item>)}
            />

        </div>
        );
    }

    handleInputChange(e){
        const action = {
            type: actionTypes.CHANGE_INPUT_VALUE,
            value: e.target.value
        }
        store.dispatch(action);
    }

    storeChange(){
        // console.log('storeChange')
        this.setState(store.getState());
    }

    HandleSure(){
        const action = {
            type: actionTypes.ADD_TODO_ITEM,
        }
        store.dispatch(action);
    }

    handleDelete(index){
        const action = {
            type: actionTypes.DELETE_TODO_ITEM,
            index
        }
        store.dispatch(action);
    }

}

export default App;